<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>
    <el-drawer v-model="visible" direction="rtl" @close="form={}" size="1000px">
      <el-scrollbar>
        <div class="scrollbar-box">
          <el-divider>基本信息</el-divider>
          <el-descriptions :column="1" border>
            <el-descriptions-item label-class-name="description-label" label="活动封面">
              <el-image :src="form.thumb" :preview-src-list="[form.thumb]" style="width: 100px;height: 100px"/>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="description-label" label="活动标题">
              {{ form.title }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="description-label" label="店铺信息">
              <div class="flex flex-center" v-if="form.shop">
                <el-image :src="form.shop.logo" :preview-src-list="[form.shop.logo]" style="width: 50px;height: 50px"/>

                <div class="name" style="padding-left: 15px;">
                  {{ form.shop.name }}
                </div>
              </div>
              <div v-else> 商户不存在</div>

            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions :column="2" border>
            <el-descriptions-item label-class-name="description-label" label="活动类型">
              {{ $shopkeeper.activityType(form.type) }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="description-label" label="活动类目">
              {{ form.category }}
            </el-descriptions-item>

          </el-descriptions>
          <el-descriptions :column="1" border>
            <el-descriptions-item label-class-name="description-label" label="活动时间">
              {{ $filter.parseTime(form.startTime) }} ~
              {{ $filter.parseTime(form.endTime) }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="description-label" label="兑换时间">
              {{ $filter.parseTime(form.useStart) }} ~
              {{ $filter.parseTime(form.useEnd) }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="description-label" label="原价">
              <span style="color:var(--el-color-danger)">{{ form.price }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-scrollbar>
    </el-drawer>


    <el-drawer v-model="adDialog.show" direction="ltr" size="1000px">
      <AdDetail v-if="adDialog.show"/>
    </el-drawer>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";
import {parseTime} from "@/utils";
import {activityStatus, activityStatuses} from "@/utils/shopkeeper";
import AdDetail from "@/views/activity/components/AdDetail.vue";

export default {
  components: {AdDetail, TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '奖品标题',
          placeholder: '奖品标题搜索',
          key: 'title'
        },

        {
          type: 'select',
          label: '状态',
          placeholder: '选择状态',
          key: 'status',
          options: activityStatuses
        },
        {
          type: 'text',
          label: '店铺名字',
          placeholder: '店铺名字搜索',
          key: 'shopName'
        },
        {
          type: 'buttons',
          buttons: [
            {
              label: '首页抽奖',
              type: 'primary',
              callback: () => {
                this.adDialog.show = true
              }
            }
          ]
        }

      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },
        {
          label: '奖品名称',
          width: '100px',
          type: 'render',
          render: (data) => {
            return `<img src="${data.thumb}" style="width: 48px;height: 48px"/>`;
          }
        },
        {
          label: '活动标题',
          prop: 'title',
          width: '180px'
        },
        {
          label: '所属店铺',
          type: 'render',
          width: '240px',
          render: (data) => {
            if (!data.shop) return ''
            return `<div class="flex flex-center">
                        <img src="${data.shop.logo}" style="width: 48px;height: 48px"/>
                        <div style="padding-left: 15px;">${data.shop.name}</div>
                    </div>`;
          }
        },
        {
          label: '广告状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            return activityStatus(data.status)
          },
        },
        {
          label: '投放时间',
          type: 'render',
          width: '150px',
          render: (data) => {
            return `${data.dayStart}~${data.dayEnd}`;
          },
        },
        {
          label: '广告时间',
          type: 'render',
          width: '330px',
          hidden: true,
          render: (data) => {
            if (data.status == 0) return '待投放'
            return `${parseTime(data.startTime)}~${parseTime(data.endTime)}`;
          },
        },
        {
          label: '兑换时间',
          type: 'render',
          width: '330px',
          render: (data) => {
            return `${parseTime(data.useStart)}~${parseTime(data.useEnd)}`;
          },
        },
        {
          label: '投放单价',
          type: 'render',
          width: '100px',
          render: (data) => {
            return `${data.feePrice}`;
          },
        },
        {
          label: '投放小时',
          type: 'render',
          width: '100px',
          render: (data) => {
            return `${data.timeNum}小时`;
          },
        },

        {
          label: '支付金额',
          type: 'render',
          width: '100px',
          render: (data) => {
            return `${data.payMoney}`;
          },
        },
        {
          label: '添加时间',
          type: 'render',
          width: '180px',
          render: (data) => {
            return parseTime(data.created);
          },
        }, {
          label: '操作',
          type: 'buttons',
          width: '100px',
          fixed: true,
          buttons: [
            {
              label: '查看',
              type: 'primary',
              styles: {},
              icon: 'Search',
              callback: (data) => {
                this.visible = true;
                this.form = data;
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
      visible: false,
      form: {},
      adDialog: {
        show: false
      }
    }
  },
  created() {

  },


  methods: {
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manage/activity-ad/', data).then(res => {
        this.data.list = res.data;
        this.data.total = res.total;
      })
    },
    onAdd() {
      this.visible = true;
    },


  }
}
</script>

<style scoped lang="scss">

</style>